<template>
  <div class="home-b">
    <div class="banner">
      <img
        src="@/assets/img/home/banner1.png"
        alt=""
        class="bg"
        ondragstart="return false"
      />
      <div class="intelligence">
        <h4>
          <p class="zh">技术分析</p>
          <p class="en">SCIENCE AND TECHNOLOGY ANALYSIS</p>
        </h4>
        <!-- <h5>全球能源行业大数据挖掘及科技情报分析系统</h5> -->
        <dl class="category">
          <dd
            v-for="(item, index) in categoryOptions"
            :key="index"
            @mouseover="handleMouseOver(index)"
            @mouseout="handleMouseOut"
            @click="handleChangePage(item)"
          >
            <div
              class="category-item"
              :class="{ gray: !item.router, def: item.router }"
            >
              <i class="bg iconfont icon-liubianxing"></i>
              <p class="label" v-html="item.label"></p>
            </div>
          </dd>
        </dl>
      </div>
    </div>
    <div class="panel2">
      <!-- <img
          src="@/assets/img/home/banner1.png"
          alt=""
          class="bg"
          ondragstart="return false"
        /> -->
      <div class="container">
        <h4>
          <p class="zh">科技大数据中心</p>
          <p class="en">SCIENCE AND TECHNOLOGY CENTER FOR BIG DATA</p>
        </h4>
        <p class="abst">
          大数据中心拥有1299万+数据量，其中包括成果数据、标准数据等，能源数据企业画像、人才画像等，能源行业政策数据、资讯数据等海量数据。
        </p>
        <dl class="data-amount">
          <dd v-for="(item, index) in dataAmountData" :key="index">
            <div class="l">
              <img
                v-if="index == 0"
                src="../../../assets/img/home-c-fm.png"
                alt=""
              />
              <img
                v-if="index == 1"
                src="../../../assets/img/home-c-bz.png"
                alt=""
              />
              <img
                v-if="index == 2"
                src="../../../assets/img/home-cqy.png"
                alt=""
              />
              <img
                v-if="index == 4"
                src="../../../assets/img/home-c-cy.png"
                alt=""
              />
              <img
                v-if="index == 3"
                src="../../../assets/img/home-c-zj.png"
                alt=""
              />
              <img
                v-if="index == 5"
                src="../../../assets/img/home-c-zx.png"
                alt=""
              />
            </div>
            <div class="r">
              <h5>{{ item.name }}</h5>
              <p>
                <span>{{ item.amount }}</span
                ><i>{{ item.unit }}+</i>
              </p>
            </div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      categoryActiveIndex: -1,
      categoryOptions: [],
      dataAmountData: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.dataAmountData = [
        { name: "成果数据", amount: "18", unit: "万" },
        { name: "标准数据", amount: "21", unit: "万" },
        { name: "企业画像", amount: "275", unit: "万" },
        { name: "人才画像", amount: "955", unit: "万" },
        { name: "政策数据", amount: "2", unit: "万" },
        { name: "资讯数据", amount: "28", unit: "万" },
      ];
      this.categoryOptions = [
        {
          label: "成果库",
          icon: "icon-chanyefenxi",
          router: "DC",
          type: "achieve",
          // query: {
          // },
          style: { "font-size": ".4rem" },
        },
        {
          label: "标准库",
          icon: "icon-chanyefenxi",
          router: "DC",
          type: "standard",
          // query: {
          // },
          style: { "font-size": ".4rem" },
        },
        {
          label: "企业画像",
          icon: "icon-chanyefenxi",
          router: "EI",
          style: { "font-size": ".4rem" },
        },
        {
          label: "人才画像",
          icon: "icon-chanyefenxi",
          router: "PD",
          style: { "font-size": ".4rem" },
        },
        {
          label: "产业技术链",
          icon: "icon-chanyefenxi",
          router: "IndustrialChain",
          style: { "font-size": ".4rem" },
        },
        {
          label: "行业动态",
          icon: "icon-chanyefenxi",
          router: "Consult",
          style: { "font-size": ".4rem" },
        },
      ];
    },
    handleMouseOver(index) {
      this.categoryActiveIndex = index;
    },
    handleMouseOut() {
      this.categoryActiveIndex = -1;
    },
    // 页面跳转
    handleChangePage(item) {
      this.$router.push({
        name: item.router,
        query: {
          type: item.type,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home-b {
  position: relative;
  width: 100%;
  .banner {
    position: relative;
    width: 100%;
    .bg {
      display: block;
      width: 100%;
    }
    .banner-title {
      position: absolute;
      top: 1.88rem;
      left: 0;
      // align-items: center;
      // justify-content: center;
      width: 100%;
      text-align: center;
      img {
        display: inline-block;
        height: 0.85rem;
        margin-bottom: 0.25rem;
      }
      .tip {
        font-size: 0.3rem;
        letter-spacing: 0.06rem;
        text-indent: 0.06rem;
        color: $color107;
      }
    }
    .search-bar {
      position: absolute;
      top: 5.41rem;
      left: 50%;
      margin-left: -4.785rem;
      .search-inp {
        width: 8.05rem;
        height: 0.6rem;
        margin-right: 0.2rem;
        vertical-align: middle;
        ::v-deep {
          ::placeholder {
            color: rgba(254, 254, 254, 0.5) !important;
            // color: red !important;
          }
          .el-input__inner {
            // height: .5rem;
            height: initial;
            line-height: 0.6rem;
            border-right: 0;
            border-color: $color21;
            border-top-left-radius: 6px;
            border-top-right-radius: 0;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 0;
            // font-family: SourceHanSansCN-Regular;
            font-size: 0.2rem;
            color: $color20;
            background-color: transparent;
          }
          .el-input-group__append {
            width: 0.6rem;
            padding-right: 0.25rem;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
            box-sizing: border-box;
            text-align: center;
            background-color: transparent;
            .search-btn {
              display: block;
              width: 100%;
              text-align: center;
              font-size: 0.24rem;
              color: $color2;
            }
          }
        }
      }
      .search-btn2 {
        width: 1.3rem;
        height: 0.62rem;
        padding: 0;
        // padding-left: .21rem;
        border-color: $mainColor;
        border-radius: 6px;
        box-sizing: border-box;
        // font-family: SourceHanSansCN-Regular;
        font-size: 0.22rem;
        letter-spacing: 1px;
        color: $color17;
        vertical-align: middle;
        background-color: $mainColor;
        &:hover {
          background-color: $mainColor;
        }
      }
      .search-type {
        line-height: 0.48rem;
        padding-left: 0.1rem;
        margin-bottom: 0.14rem;
        font-size: 0.22rem;
        color: $color20;
        span {
          display: inline-block;
          margin-right: 0.24rem;
          cursor: pointer;
          &.active {
            // font-size: .26rem;
            color: $mainColor;
          }
        }
      }
      .tip {
        line-height: 0.3rem;
        font-size: 0.14rem;
        color: $color81;
      }
    }
    .intelligence {
      position: absolute;
      top: 0.91rem;
      left: 50%;
      width: 14rem;
      margin-left: -7rem;
      box-sizing: border-box;
      h4 {
        position: relative;
        width: 100%;
        height: 0.56rem;
        margin-bottom: 1rem;
        p {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          // font-family: SourceHanSansCN-Bold;
          font-weight: normal;
          text-align: center;
        }
        .zh {
          z-index: 2;
          line-height: 0.57rem;
          margin-top: 0.22rem;
          font-size: 0.3rem;
          color: $color107;
        }
        .en {
          z-index: 1;
          line-height: 0.56rem;
          font-size: 0.56rem;
          // font-weight: bold;
          text-transform: uppercase;
          color: rgba(73, 66, 89, 0.5);
        }
      }
      h5 {
        margin-bottom: 0.44rem;
        font-size: 0.2rem;
        font-weight: bold;
        text-align: center;
        letter-spacing: 1px;
        color: $color93;
      }
      .category {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        dd {
          position: relative;
          width: calc(100% / 6);
          height: 1.4rem;
          // width: 1.18rem;
          // height: 1.36rem;
          &:nth-of-type(3) {
            .category-item {
              .logo {
                left: -0.01rem;
              }
            }
          }
          &:hover {
            .category-item {
              &.def {
                cursor: pointer;
                .bg {
                  font-weight: bold;
                  transform: scale(1.1);
                  opacity: 1;
                }
                .logo {
                  .iconfont {
                    color: $color2;
                  }
                }
                .label {
                  transform: scale(1.1);
                  // bottom: .2rem;
                  // font-size: .2rem;
                  font-weight: bold;
                  color: $color40;
                }
              }
            }
          }
          .category-item {
            // position: absolute;
            // top: 0;
            // left: 0;
            width: 100%;
            height: 1.4rem;
            display: flex;
            align-items: center;
            &.gray {
              .bg {
                color: $color6;
              }
              .logo {
                .iconfont {
                  color: $color6;
                }
              }
              .label {
                color: $color6;
              }
            }
            .bg {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              line-height: 1.5rem;
              text-align: center;
              font-size: 1.6rem;
              color: $color2;
              opacity: 0.32;
              &:before {
                width: 100%;
              }
            }
            .logo {
              position: absolute;
              top: 0;
              left: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 80%;
              .iconfont {
                display: inline-block;
                background-image: linear-gradient(
                  180deg,
                  $mainColor,
                  $color106
                );
                background-clip: text;
                color: transparent;
              }
            }
            .label {
              // position: absolute;
              // bottom: 0.24rem;
              // left: 0;
              width: 100%;
              line-height: 0.3rem;
              font-size: 0.2rem;
              text-align: center;
              color: $color27;
            }
          }
        }
      }
    }
  }

  .panel2 {
    position: relative;
    background-color: #191f4b;
    // .bg {
    // display: block;
    width: 100%;
    height: 6rem;
    // }
    .container {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 6rem;
      padding: 0 2.8rem;
      box-sizing: border-box;
      h4 {
        position: relative;
        width: 100%;
        height: 0.56rem;
        margin-bottom: 0.3rem;
        text-align: center;
        p {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          // font-family: SourceHanSansCN-Bold;
          font-weight: normal;
          text-align: center;
        }
        .zh {
          z-index: 2;
          line-height: 0.57rem;
          margin-top: 0.22rem;
          font-size: 0.3rem;
          color: $color107;
        }
        .en {
          z-index: 1;
          line-height: 0.56rem;
          font-size: 0.53rem;
          text-transform: uppercase;
          color: rgba(146, 143, 152, 0.4);
        }
      }
      .abst {
        position: absolute;
        top: 2rem;
        left: 16.1%;
        width: 17%;
        line-height: 0.38rem;
        // font-family: SourceHanSansCN-Light;
        font-size: 0.2rem;
        letter-spacing: 1px;
        color: $color31;
        &:before {
          position: absolute;
          bottom: -0.1rem;
          right: 0.1rem;
          width: 0.34rem;
          height: 0.05rem;
          content: "";
          background-color: $mainColor;
        }
      }
      .data-amount {
        position: absolute;
        top: 2rem;
        left: 36.4%;
        display: flex;
        flex-wrap: wrap;
        width: 52%;
        dd {
          width: 33.3333%;
          margin-bottom: 6.8%;
          display: flex;
          .l {
            width: 50%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            img {
              width: 50px;
            }
          }
          .r {
            width: 50%;
            h5 {
              line-height: 0.3341rem;
              padding-left: 17%;
              // font-family: SourceHanSansCN-Light;
              font-size: 0.18rem;
              color: $color109;
            }
            p {
              line-height: 0.3341rem;
              padding-left: 17%;
              color: $mainColor;
              span {
                display: inline-block;
                font-size: 0.38rem;
                vertical-align: middle;
              }
              i {
                display: inline-block;
                font-size: 0.23rem;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
}
</style>
